<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—领养中心</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <!-- elementUI引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../CSS/AdoptionCenter.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <script src="../JS/jQuery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../CSS/OutCSS/AdoptionCenter/demo.css">

</head>
<body>
    
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
      <!-- mask登录需要作为背景强调登陆框 -->
      <div class="mask"></div>
          <div class="logo">宠物收容所</div>
          <ul class="nav-menu">
              <li><a href="index.html">首页</a></li>
              <li class="current"><a href="AdoptionCenter.html">领养中心</a></li>
              <li><a href="PetKnowledge.html">宠物知识</a></li>
              <li><a href="TeamActivities.html">团队活动</a></li>
              <li><a href="BeVolunteer.html">成为志愿者</a></li>
              <li><a href="Donate.html">捐助</a></li>
          </ul>
          <div  class="nav-login" v-show="user_id">
          <div class="Avater">
              <ul>
              <li><img :src="logginMessage.user_avater_url" alt=""></li>
              <li style="color: #000;"><div>{{this.logginMessage.userlogin_name}}</div></li>
              <li><div><a href="userCenter.html">用户中心</a></div></li>
              <li @click="outLogin" style="color: #000;">退出登录</li>
              </ul>
          </div>
          </div>
  
  
  
  
          <div class="nav-login" v-show="!user_id" @click="Loginhandle">
              <ul>
                  <li><a href="javascript:;">
                      <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                  </a></li>
                  <li><a href="javascript:;">登录/注册</a></li>
              </ul>
          </div>
  
          <div class="login-box">
          <div class="Login">
              <div class="owl" id="owl">
                  <div class="hand"></div>
                  <div class="hand hand-r"></div>
                  <div class="arms">
                  <div class="arm"></div>
                  <div class="arm arm-r"></div>
                  </div>
              </div>
  
          <span class="iconfont icon-guanbi1" id="closeBtn"></span>
              <img src="../images/touxiang.png" id="avatar" alt="">
          <form action="">
              <div>
                  <span class="iconfont icon-yonghu"></span>
                  <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
              </div>
              <div>
                  <span class="iconfont icon-ttubiao_password"></span>
                  <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
              </div>
              <span @click="loginButton" style="color: #fff;
              background-color: #20b2aa;
              height: 50px;
              width: 150px;
              text-align: center;
              font-size: 1.2rem;
              line-height: 50px;
              border-radius: 3px;
              ">提交我</span>
          </form>
          <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
          </div>
  
  
          <div class="Register"  style="display: none;">
  
              <div class="owl" id="reowl">
                  <div class="hand"></div>
                  <div class="hand hand-r"></div>
                  <div class="arms">
                  <div class="arm"></div>
                  <div class="arm arm-r"></div>
                  </div>
              </div>
  
              <span class="iconfont icon-guanbi1" id="closeBtn"></span>
              <img src="../images/touxiang.png" id="avatar" alt="">
              <el-row>
              <el-col>
                  <el-form 
                  status-icon 
                  :inline="true" 
                  label-width="0px" 
                  :model="registerMessage" 
                  ref="registerMessage" 
                  class="demo-ruleForm" 
                  :rules="rules" 
                  
                  >
                      <div>
                          <span class="iconfont icon-email"></span>
                          <el-form-item label="" prop="user_email">
                          <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                          </el-form-item>
                          <span class="iconfont icon-dianhua"></span>
                          <el-form-item label="" prop="user_phone">
                          <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                          </el-form-item>
                      </div>
                      <div>
                          <span class="iconfont icon-yonghu"></span>
                          <el-form-item label="" prop="user_name">
                              <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                          </el-form-item>
                          <span class="iconfont icon-dizhi"></span>
                          <el-form-item label="" prop="user_address">
                              <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                          </el-form-item>
                      
                      </div>
                      <div>
                          <span class="iconfont icon-ttubiao_password"></span>
  
                          <el-form-item label="" prop="user_password">
                          <el-input placeholder="密码" 
                          autocomplete="off" 
                          id="registerpass1" 
                          v-model="registerMessage.user_password" 
                          type="password" 
                          show-password
     
                          ></el-input>
                          </el-form-item>
                          <span class="iconfont icon-ttubiao_password"></span>
  
                          <el-form-item label="" prop="user_password_again">
                          <el-input placeholder="再次输入密码" 
                          autocomplete="off" 
                          id="registerpass" 
                          v-model="registerMessage.user_password_again" 
                          type="password" 
                          show-password
                          
                          
                          ></el-input>
                          </el-form-item>
                      </div>
                      <div>
                          <el-input
                          style="
                          height: 10vh;
                          "
                          type="textarea"
                          placeholder="介绍一下自己吧"
                          v-model="registerMessage.user_info"
                          maxlength="60"
                          show-word-limit
                          style="font-size: 1.5rem;
                              height: 15vh;
                          "
                          >
                          </el-input>
                      </div>
                      <div style="color: #000;">
                          <template>
                          是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                          <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                          </template>
                      </div>
          <div style="color: #000;
          border: 1px #ccc solid;
          ">
          
          <el-upload
              class="upload-demo"
              drag
              action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
              name="imgFile"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              multiple 
              
              >
              <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
              <i v-else class="el-icon-upload"
              style="
                  font-size: 67px;
                  color: #C0C4CC;
                  margin: 16px 0 16px;
                  line-height: 50px;
              "
              >
              <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </i>
              
          </el-upload>
          </div>
          
          <div>
              <el-form-item>
                  <el-button type="primary" @click="submitForm('registerMessage')"
                      style="width: 15vw;"
                  >提交</el-button>
                  <el-button @click="resetForm('registerMessage')"
                      style="width: 15vw;"
                  >重置</el-button>
              </el-form-item>
          </div>
  
                  </el-form>
              </el-col>
              </el-row>
              <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
          </div>
  
          </div>
           <div class="burger">
               <div class="top-line"></div>
               <div class="middle-line"></div>
               <div class="bottom-line"></div>
           </div>
  </nav>
    <!-- 网页内容 -->
    <div class="content-wrapper" >
        <div class="banner">
            <section class="slideshow">

                <!-- slideshow:navigation START -->
                <ul class="navigation">
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item active">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/banner1.jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/Bevolunteer-images/banner5.png);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/banner3.jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/Bevolunteer-images/banner8.png);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/banner5.jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/banner6.jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/cat\ \(2\).jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/cat\ \(1\).jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                  <!-- slideshow:navigation:item START -->
                  <li class="navigation-item">
                    <span class="rotate-holder"></span>
                    <span class="background-holder" style="background-image: url(../images/banner10.jpg);"></span>
                  </li>
                  <!-- slideshow:navigation:item END -->
          
                </ul>
                <!-- slideshow:navigation END -->
          
          
                <!-- slideshow:details START -->
                <div class="detail">
                
                  <!-- slideshow:details START -->
                  <div class="detail-item active">
                    <div class="headline">我们的第一次救助</div>
                    <div class="background" style="background-image: url(../images/banner1.jpg)"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    ></div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">既然要养狗，就应该对它负责到底</div>
                    <div class="background" style="background-image: url(../images/Bevolunteer-images/banner5.png);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    ></div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">每一次小小的帮助都是对生命的救赎</div>
                    <div class="background" style="background-image: url(../images/banner3.jpg);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    ></div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">猫如良医，可治心病</div>
                    <div class="background" style="background-image: url(../images/Bevolunteer-images/banner8.png);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    ></div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">救助的日子。。。</div>
                    <div class="background" style="background-image: url(../images/banner5.jpg);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    ></div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">流浪动物救助之路依旧很长</div>
                    <div class="background" style="background-image: url(../images/banner6.jpg);"></div> 
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    > </div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">猫咪就是有这样一种魔力！</div>
                    <div class="background" style="background-image: url(../images/cat\ \(2\).jpg);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    >在养猫的过程中，情感被触动的瞬间太多太多，<br>体会那刹那的温暖，嗯，我变得更有爱了。</div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">如果他们睡去，世界便会沉寂。</div>
                    <div class="background" style="background-image: url(../images/cat\ \(1\).jpg);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    >“ 养猫对于焦虑的我们来说，是构建出了一个童话世界，<br>是日常生活之外多出来的一段时间和一个空间，或者，一个树洞。</div>
                </div>
                  <!-- slideshow:details END -->
                  
                  <!-- slideshow:details START -->
                  <div class="detail-item">
                    <div class="headline">手术中。。。</div>
                    <div class="background" style="background-image: url(../images/banner10.jpg);"></div>
                    <div class="description"
                    style="
                    font-size: 3rem;
                    color: #fff;
                    z-index: 99;
                    position: absolute;
                    bottom: 30%;
                    right: 0px;

                    "
                    >小可爱挺过了难关</div>
                  </div>
                  <!-- slideshow:details END -->
                  
                </div>
                <!-- slideshow:details END -->
          
              </section>
        </div>
        <!-- 按钮 -->
        
    
        <div class="issuePet" id="addPetButton">
          <div class="issuePetfrom">
            <span @click="addFormClose" class="close">X</span>            
                <div class="wrapper">
                  <div>
                    <label for="">
                      Ta的名字：
                    </label>
                    <input type="text" v-model="addpet.pet_name">
                  </div>      
                  <div>
                    <label for="">
                      Ta的类别：
                    </label>
                    <input type="text" v-model="addpet.pet_type_id">
                  </div>      

                  <div>
                    <label for="">
                      Ta的年龄：
                    </label>
                    <select v-model="addpet.pet_age">
                      <option >请选择</option>
                      <option value="0.5">6个月以下</option>
                      <option value="2">6个月到2岁</option>
                      <option value="4">3岁到4岁</option>
                      <option value="6">5岁到6岁</option>
                      <option value="7">6岁以上</option>
                    </select>
                  </div>

                  <div>
                    <label for="">
                      Ta的体重：
                    </label>
                    <select v-model="addpet.pet_weight">
                      <option >请选择</option>
                      <option value="3">3kg以下</option>
                      <option value="5">3-5kg</option>
                      <option value="10">5-10kg</option>
                      <option value="15">10-15kg</option>
                      <option value="16">15kg以上</option>
                    </select>
                  </div>

                  <div class="gender">
                    <label>Ta的性别是：</label>
                    弟弟：<input type="radio" name="gender" value="雄性" v-model="addpet.pet_sex">
                    妹妹：<input type="radio" name="gender" value="雌性" v-model="addpet.pet_sex">
                  </div>

                  <div id="descript">
                    <label>对Ta的描述：</label>
                    <textarea v-model.lazy="addpet.pet_info"></textarea>
                  </div>

                  <div id="imgUpload">
                    <label>选择Ta的最美瞬间：</label>
                      <input id="upload" type="file">
                  </div>
                  <div class="submit">
                    <button >提交</button>
                  </div>

                </div>
                              
          </div>
          <!-- <button @click="addForm">你有想要发布的宠物吗？点击我发布宠物</button> -->
            
        </div>

        <!-- 宠物展示 -->

        <div class="petContents" id="petsshow">
          <div class="wrapper">
            



            <div class="Classification">
              <dl>
                <dt>年龄：</dt>
                <dd @click="selectPetAge('一~二岁',1,2)">一~二岁</dd>
                <dd @click="selectPetAge('三~四岁',3,4)">三~四岁</dd>
                <dd @click="selectPetAge('五岁~六岁',5,6)">三~四岁</dd>
                <dd @click="selectPetAge('六岁以上',6,1000)">六岁以上</dd>
              </dl>
              <dl id="fisrtType">
                <dt>种类：</dt>
                  <dd v-for="(type,index) in typeFirstShow" 
                  @click="selectPetType(typeFirstShow[index].pet_type_name)"
                  >
                  {{type.pet_type_name}}</dd>
                  <span 
                  @click="showAllpetType"
                  class="iconfont icon-menu" style="
                  margin-left:20px;
                  font-size:30px;"></span>
                 
              </dl>

              <div id="AllType">
                <div class="content">
                  
                    <dt>种类：</dt>
                    <dd v-for="(type,index) in petTypeList" 
                    @click="selectPetType(petTypeList[index].pet_type_name)"
                    >
                    {{type.pet_type_name}}</dd>
                    
                    <dd @click="showFirst" id="back">返回</dd>
                  
                </div>
              </div>
              
              


              <dl>
                <dt>体重：</dt>
                <dd @click="selectPetWeight('小型（5-10KG）',5,10)">小型（5-10KG）</dd>
                <dd @click="selectPetWeight('中型（10-20KG）',10,20)">中型（10-20KG）</dd>
                <dd @click="selectPetWeight('大型（20-30KG）',20,30)">大型（20-30KG）</dd>
                <dd @click="selectPetWeight('超大型（30KG以上）',30,100)">超大型（30KG以上）</dd>
              </dl>
              
              <dl class="select" style="border-bottom-width: 0px;">
                <dt>已选条件：</dt>
                <dd @click="hideAge" id="selectAge">{{BeSelected.age}}</dd>
                <dd @click="hideType" id="selectType">{{BeSelected.type}}</dd>
                <dd @click="hideWeight" id="selectWeight">{{BeSelected.weight}}</dd>
              </dl>
            </div>
        </div>

            <div class="show">
              <ul>
                <li v-for="pet in PetsData" @click="jumpPetDetail(pet.pet_id)" id="petCard">
                  <a href="javascript:;">
                    <img :src="pet.pet_img" alt="">
                    <div class="description">
                      <h2>姓名：{{pet.pet_name}}</h2>
                      <h3>年龄：{{pet.pet_age}}岁</h3>
                      <h3>类型：{{pet.pet_type_name}}</h3>
                      <span class="iconfont icon-crown-fill"></span>{{pet.pet_hot}}
                    </div>
                  </a>
                    
                </li>
              </ul>



            
              
                <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange" :current-page="selectDataRange.currentPage"
                  :total="allPetsNumber" 
                  >
                </el-pagination>             
            </div>

            



            
        </div>

    </div>



    <!-- 网页内容设计结束 -->


    <!-- 以下为网页底部设计  -->
    <footer id="footer">
      <div class="content">
          <div class="top">
              <div class="logo" style="color: #000;">
                  <h1>宠物收容所</h1>
              </div>
          </div>
          <div class="middle">
              <div class="left">
                  <ul>
                      <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                      <li><a href="">公告</a></li>
                      <li><a href="">我们的未来</a></li>
                      <li><a href="">领养帮助</a></li>
                      <li><a href="">信息归档</a></li>
                      <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                  </ul>
                  </div>
                  <div class="right">
                  <ul>
                      <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                      <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                      <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                      <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                      <li><a href="">意见反馈</a></li>
                      <li><a href="">免责声明</a></li>
                  </ul>
                  </div>
                  <div class="wechat" style="padding-left: 2vh;">
                  <h2>关注我们</h2>
                  <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                      <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                  </div>
          </div>
          <div class="bottom">
              <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
          </div>
      </div>
  </footer>
</body>
        
       <!-- 轮播图Js引入 -->
<script src="../JS/jQuery.min.js"></script>
<script src="../JS/OutJs/AdoptionCenter/TweenMax.min.js"></script>
<script src="../JS/OutJs/AdoptionCenter/imagesLoaded.js"></script>
<script src="../JS/OutJs/AdoptionCenter/CSSPlugin.min.js"></script>
<script src="../JS/OutJs/AdoptionCenter/TextPlugin.min.js"></script>
<script src="../JS/OutJs/AdoptionCenter/AdoptionBanner.js"></script>



 
        
<script src="../JS/AdoptionCenter.js"></script>

<script src="../JS/axios.js"></script>

<!-- import Vue before Element -->
<script src="../JS/Vue2.js"></script>
<!-- import JavaScript -->
<script src="../JS/OutJs/AdoptionCenter/elementUIindex.js"></script>
</html> 